<style scoped>
  .layout-con {
    height: 100%;
    width: 100%;
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }

  .title-top-center {
    text-align: center;

  }

  .title-top-right {
    float: right
  }

  .btn_tools {
    padding: 6px 10px 6px 10px;
    background: #eee;
    border-radius: 20px;
  }

  .ivu-cell-extra {
    color: #ed4014;
  }
</style>
<template>
  <Row type="flex" justify="center" align="top" class="code-row-bg">
    <Col id="indexPhone1" span="1" :style="phoneStyle?{background:'#ffffff',height:'50px',borderTop: '1px solid #cccccc'}:{background:'#3F88D5',height:'100vh'}">
      <NavLeft :selected="1" :avatar="avatar"></NavLeft>
    </Col>
    <Col id="indexPhone2" span="4">
      <NavMiddle :itemList="itemList"></NavMiddle>
    </Col>
    <Col id="indexPhone3" span="19" style="background:#f5f7f9;height:100vh;">
      <Layout>
        <Content :style="{padding: '0 16px 16px'}">
          <Breadcrumb v-if="!phoneStyle" :style="{margin: '16px 0'}">
            <Row type="flex" justify="space-between">
              <Col span="8">

                <!--<Button type="text">年成绩</Button>-->
                <!--<Button type="text">月成绩</Button>-->
                <Button type="primary">日成绩</Button>

              </Col>
              <Col span="8" class="title-top-center"
                   style="font-size: 16px; font-weight: bold; color: rgb(70, 76, 91);text-align:center;"></Col>
              <Col span="8">

                <!--
                <a type="text" size="large" style="float:right" class="btn_tools">
                  <Icon type="ios-share-alt" size="20"></Icon>
                </a>
                <a type="text" size="large" style="float:right;margin-right:10px;" class="btn_tools">
                  <Icon type="ios-cog" size="20"></Icon>
                </a>
                -->

                <DatePicker size="large" type="date" placeholder="选择日期"  :editable="false" :clearable="false" :value="chooseDate"
                            @on-change="dateChange" style="float:right;margin-right:10px;"></DatePicker>

              </Col>
            </Row>

          </Breadcrumb>
          <div class="phoneBanner" v-if="phoneStyle">管理单元</div>
          <Card :bordered="true" dis-hover class="itemListDiv">
            <p slot="title" style="height:32px;">地区筛选
              <Dropdown :style="phoneStyle?'margin-left: 0px':'margin-left: 20px'">
                <Button>
                  所有地区
                  <Icon type="ios-arrow-down"></Icon>
                </Button>
                <DropdownMenu slot="list">
                  <DropdownItem>重庆</DropdownItem>
                  <DropdownItem>安徽芜湖</DropdownItem>
                  <DropdownItem>南京</DropdownItem>
                  <DropdownItem divided>所有地区</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </p>
            <Button slot="extra" type="primary" shape="circle" icon="ios-add" to="/additem">新建管理单元</Button>
            <div>
              <Divider orientation="left" v-if="!phoneStyle">班组战绩</Divider>
              <div class="itemListsIndex">
                <div class="itemListIndex" v-for="item in itemList">
                  <div class="items" @click="itemGo(item)">
                    <div :class="{'circular bgGreen':item.score == 'A','circular bgYellow':item.score == 'B','circular bgRed':item.score == 'C',}"></div>
                    <div class="items_left">
                      <span class="il_city">{{item.city}}</span>
                      <span class="il_department_name">{{item.department_name}}</span>
                    </div>
                    <div class="items_right">
                      <span class="level">{{item.score}}</span>
                      <Icon type="ios-arrow-forward" />
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </Card>
        </Content>
      </Layout>
    </Col>
  </Row>
</template>
<script>
  import cookie from 'js-cookie';
  import NavLeft from '@/components/NavLeft';
  import NavMiddle from '@/components/NavMiddle';

  export default {
    data() {
      return {
        isCollapsed: false,
        itemList: [],
        avatar: "",
        chooseDate: cookie.get('chooseDate'),
        phoneStyle: false,
      };
    },
    components: {NavLeft: NavLeft, NavMiddle: NavMiddle},
    created() {
      let self = this
      window.document.title = 'SCS';
      let dw = document.body.clientWidth
      if (dw < 820) {
        self.phoneStyle = true
      } else {
        self.phoneStyle = false
      }
      if (cookie.get('isAdmin') == 0) {
        this.$router.push({
          path: '/item/staff/'
        })
      }
      self.getData();
      if (cookie.get('chooseDate') == undefined || cookie.get('chooseDate') == null || cookie.get('chooseDate') == '') {
        let date = new Date();
        let seperator1 = "-";
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        let currentdate = year + seperator1 + month + seperator1 + strDate;
        cookie.set('chooseDate', currentdate);
      }
      if (cookie.get('isAdmin') == 2) {
        cookie.set('uid','')
        cookie.set('token','')
      }
    },
    methods: {
      getData() {
        var uid = cookie.get('uid');
        var token = cookie.get('token');
        if (!uid || !token) {
          //this.$Message.warning('请登录');
          //store.dispatch('setLoginStatus', 0)
          //window.location.reload()
        }
        this.$Loading.start();
        var str = {type: 'login',ymd: this.chooseDate, loginType: cookie.get('loginType')};
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/home', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          console.log(res,'管理端')
          if (res.status == -1 && res.data.backurl) {
            this.$Modal.warning({
              title: '提示',
              content: '请在企业微信授权登录后使用',
              onOk: () => {
                if (this.$twjsdes.isWechat() === true) {
                  window.location.href = res.data.backurl_oauth2
                } else {
                  window.location.href = res.data.backurl
                }
              }
            });

          } else if (res.status != 1) {
            this.$Message.error(res.msg);
          } else {
            this.itemList = res.data.list;
            this.avatar = res.data.avatar;
          }
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      dateChange(val) {
        let self = this
        self.chooseDate = val
        cookie.set('chooseDate',val)
        self.getData()
      },
      itemGo(item){
        let self = this
        localStorage.setItem('middleId', item.unit_id)
        self.$router.push({
          path:'/item/detail',
          query:{id:item.unit_id}
        })
      },
    },
    computed: {
      menuitemClasses: function () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
  }
</script>
<style lang="less">
  .itemListDiv{
    .ivu-card-body{
      padding-bottom: 0;
    }
  }
  .itemListsIndex{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .itemListIndex{
      display: flex;
      flex-direction: row;
      margin-right: 30px;
      margin-bottom: 16px;
      .items{
        width: 170px;
        height: 65px;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 5px;
        position: relative;
        padding: 0 16px;
        box-sizing: border-box;
        cursor: pointer;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .circular{
          position: absolute;
          top: -6px;
          right: -6px;
          width: 16px;
          height: 16px;
          border-radius: 50%;
        }
        .items_left{
          display: flex;
          flex-direction: column;
          justify-content: center;
          font-size: 13px;
          line-height: 13px;
          .il_city{
            color: #222222;
            margin-bottom: 8px;
          }
          .il_department_name{
            color: #222222;
          }
        }
        .items_right{
          display: flex;
          flex-direction: row;
          margin-top: auto;
          margin-bottom: auto;
          .level{
            font-size: 20px;
            line-height: 20px;
            color: #222222;
          }
          .ivu-icon{
            line-height: 20px;
          }
        }
      }
    }
  }

  /* 手机竖屏 */
  @media screen and (min-width: 0px) and (max-width: 820px) {
    #indexPhone1 {
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 99;
      width: 100%;
      height: 50px !important;
    }
    #indexPhone2{
      display: none;
    }
    #indexPhone3{
      width: 100%;
      padding-bottom: 66px !important;
      box-sizing: border-box;
      overflow-y: auto;
      .phoneBanner{
        width: 100%;
        height: 44px;
        line-height: 44px;
        color: #fff;
        text-align: center;
        font-size: 18px;
        background: #3e88d4;
      }
      .ivu-layout-content{
        padding: 0 !important;
      }
      .itemListDiv{
        .ivu-card-body{
          padding: 0 !important;
          padding-top: 8px !important;
        }
        .itemLists{
          justify-content: space-around;
          .itemList {
            margin-right: 0;
          }
        }
      }
    }
  }
</style>

